<template>
  <div class="animate__animated animate__fadeInUp">
    <div class="datr">
      <p class="ga"></p>
      <span
        class="chryu animate__animated animate__fadeInUp animate__delay-0.9s"
        >系统配置</span
      >
    </div>
    <el-card shadow="never">
      <!-- <div class="bigre">
        <span>编辑成员</span>
        <p>
          <el-row>
            <el-button size="small" @click="fanhui">返回</el-button>
          </el-row>
        </p>
      </div> -->

      <!--表单 -->

      <div
        class="
          d-flex
          a-center
          j-center
          mt-1
          animate__animated animate__fadeInUp animate__delay-0.9s
        "
      >
        <div class="biaoge">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 小程序名称 -->
            <el-form-item label="小程序名称" prop="mingcheng">
              <el-input
                v-model="ruleForm.mingcheng"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- 小程序应用编号 -->
            <el-form-item label="成员姓名" prop="name">
              <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 小程序原始id -->
            <el-form-item prop="xiaoid" label="小程序原始id">
              <el-input v-model="ruleForm.xiaoid"></el-input>
            </el-form-item>
            <!-- 小程序使用密钥 -->
            <el-form-item prop="region" label="小程序使用密钥">
              <el-input v-model="ruleForm.region"></el-input>
            </el-form-item>
            <!-- 微信支付商户号 -->
            <el-form-item prop="regionl" label="微信支付商户号">
              <el-input v-model="ruleForm.regionl"></el-input>
            </el-form-item>

            <!-- 微信支付密钥 -->

            <el-form-item prop="type" label="微信支付商户号">
              <el-input v-model="ruleForm.type"></el-input>
            </el-form-item>
            <!-- 微信退款 -->
            <el-form-item label="微信退款" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="开启"></el-radio>
                <el-radio label="关闭"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="name" label="名称" width="180">
              </el-table-column>
              <el-table-column prop="zhuangtai" label="状态" width="180">
              </el-table-column>
              <el-table-column label="操作">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                  <!-- <el-button
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="submitUpload"
                    >上传到服务器</el-button
                  > -->
                  <div slot="tip" class="el-upload__tip">未选择文件</div>
                </el-upload>
              </el-table-column>
            </el-table>
            <!-- 退款条款 -->

            <el-form-item prop="type" label="退款条款">
              <!-- <el-input
              
                type="text"
                placeholder="请输入内容"
                v-model="text1"
                
                show-word-limit
                suffix="小时"
              >
              </el-input> -->

              <!-- <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text2"
                maxlength="%"
                show-word-limit
              >
              </el-input> -->

              <div class="d-flex tui">
                <p class="p1">开课前</p>
                <p class="p2">
                  <el-input type="text" v-model="text1" show-word-limit>
                    <i slot="suffix">小时</i>
                  </el-input>
                </p>
                <p>可取消订单</p>
              </div>
              <div class="d-flex bi">
                <p class="p2">扣除退款比例</p>

                <p class="p1">
                  <el-input
                    type="text"
                    placeholder=""
                    v-model="text2"
                    show-word-limit
                  >
                    <i slot="suffix">%</i>
                  </el-input>
                </p>
                <p>
                  比如：下单支付100元，扣除退款比例设置50%，则实际用户收到退款的金额为50元
                </p>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script >
export default {
  name: "MemberEditing",
  data() {
    return {
      // 文件上传
      fileList: [],
      shuku: {},
      text1: "", //退款时长输入框
      text2: "", //退款金额比例输入框
      ruleForm: {
        name: "fdsgvdgdfg42145468", //小程序应用编号
        mingcheng: "vfdrdgrdfgdfgdfg", //小程序名称
        xiaoid: "gdfgdgfdgdggd", //小程序应用Id
        region: "ggdfgdfg5dfg9d5g", //小程序使用密钥
        regionl: "dfgfdgdfg856d4g56", //微信支付商户号
        type: "gdfgfdgdfg565265", // 微信支付密钥
        resource: "gdfgdfg56684gd6f8", //   微信退款
        type: "gd56g5d4g6d4g6dg6dd6f", //退款条款
      },

      rules: {
        //小程序名称
        mingcheng: [
          { required: true, message: "请输入小程序名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        //小程序应用编号
        name: [
          { required: true, message: "请输入小程序应用编号", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100个字符",
            trigger: "blur",
          },
        ],
        //小程序原始Id
        xiaoid: [
          { required: true, message: "请输入小程序原始Id", trigger: "blur" },
        ],
        //小程序使用密钥
        region: [
          {
            required: true,
            message: "请输入小程序使用密钥",
            trigger: "change",
          },
        ],
        //微信支付商户号
        regionl: [
          {
            required: true,
            message: "请输入微信支付商户号",
            trigger: "changel",
          },
        ],
        // 微信支付密钥
        type: [
          { required: true, message: "请输入微信支付密钥", trigger: "changel" },
        ],
        //   微信退款
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        //退款条款
        type2: [
          { required: true, message: "请输入微信支付密钥", trigger: "changel" },
        ],
      },
      // 表格数据
      tableData: [
        {
          name: "王方华",
          zhuangtai: "启用",
        },
        {
          name: "王方华",
          zhuangtai: "启用",
        },
      ],
    };
  },
  // 函数
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 文件上传函数与
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 返回
    fanhui() {
      this.$router.push("memberadmin");
    },

    //  removeDomain(item) {
    //     var index = this.dynamicValidateForm.domains.indexOf(item)
    //     if (index !== -1) {
    //       this.dynamicValidateForm.domains.splice(index, 1)
    //     }
    //   },
    
  },
  mounted() {},
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {},
  // 挂载后
  mounted() {
  // 接受数据
    console.log(this.$route.params.user);
    let t = JSON.stringify(this.$route.params.user);
    let user = sessionStorage.getItem(t);
    user != "undefined"
      ? sessionStorage.setItem("user", user)
      : sessionStorage.setItem("user", t);
    // this.ruleForm=this.$route.params.user;
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>


<style scoped lang="less">
// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}
// 表格
.biaoge {
  width: 600px;
}

// 备注框的大小
.el-form {
  /deep/.el-textarea__inner {
    padding: 40px !important;
  }
}
// 退款css
.tui {
  .p1 {
    width: 58px;
  }
  .p2 {
    width: 80px;
  }
}
.bi {
  margin-top: 10px;
  .p1 {
    width: 120px;
  }
  .p2 {
    width: 80px;
  }
}
</style>